<template>
  <div>

    <el-table :data="tableDate" style="width: 100%">
      <el-table-column
        fixed
        prop="id"
        label="序号"
        width="150"/>
      <el-table-column
        prop="msgid"
        label="消息ID"
        width="120"/>
      <el-table-column
        prop="branchName"
        label="部门名称"
        width="120"/>
      <el-table-column
        prop="browser"
        label="浏览器"
        width="120"/>
      <el-table-column
        prop="hostIp"
        label="登录IP"
        width="120"/>
      <el-table-column
        prop="loginAddress"
        label="登陆地址"
        width="120"/>
      <el-table-column
        prop="loginName"
        label="登陆名称"
        width="120"/>
      <el-table-column
        prop="loginTime"
        label="登录时间"
        width="120"/>
      <el-table-column
        prop="systemName"
        label="系统名称"
        width="120"/>

      <!--      删除-->
      <el-table-column
        label="除掉"
        width="60">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deletePerson(scope.$index,tableDate)"
            type="text"
            size="small"
            :plain="true"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <span class="demonstration">调整每页显示条数</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"

        :current-page="current_page"
        :page-sizes="page_num"
        :page-size="page_size"
        layout="sizes, prev, pager, next"
        :total="total_count">
      </el-pagination>
    </div>
  </div>

</template>

<script>
import axios from 'axios'

export default {
  name: 'personInfo',
  data() {
    return {
      tableDate: [],
      //第几页

      current_page: 1,
      page_num: [5, 15, 25],
      page_size: 5,
      total_count: 1,

      //要删除的ID
      delId: 0
    }
  },
  mounted() {
    // setInterval(() => {
      this.getData();
    // }, 1)
  },

  methods: {
    getData() {
      //分页查询数据内容
      axios.post(`http://localhost:8081/api/person_info/${this.current_page}/${this.page_size}`).then(resp => {
        if (resp.data.code === 200 && resp.data.status === 'success') {
          this.tableDate = resp.data.data[0]
        }
      })

      //数据总条数
      axios.post(`http://localhost:8081/api/person_count/`).then(resp => {
        //数据总条数
        this.total_count = resp.data
      })
    },

    //删除一条数据
    deletePerson(index, row) {
      this.delId = row[index].id

      axios.post(`http://localhost:8081/api/person_delbyid/${this.delId}`).then(resp => {
        console.log(resp.data);
        if (resp.data > 0) {
          row.splice(index, 1)
          this.$message({
            message: '删除完成',
            type: 'success',
          })

          //删除完数据  更新一下数据
          this.getData()
        } else {
          this.$message({
            message: '删除失败',
            type: 'info'
          })
        }

      })
    },

    handleSizeChange(val) {
      this.page_size = val;

      //改变每页条数后跳转到第一页
      this.current_page = 1
    },
    handleCurrentChange(val) {
      this.current_page = val

      //换页后更新数据
      this.getData()
    }
  },
}
</script>
